<template>
    <section>
        <el-col :span="24">
            <el-form inline @submit.native.prevent>
                <el-form-item v-if="['yunying','admin'].indexOf(user.role)!=-1">
                    <el-input v-model.trim="param.name" placeholder="用户名称" clearable style="width:120px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="param.is_valid" placeholder="发送状态" style="width:120px" clearable>
                        <el-option value="false" label="发送失败"></el-option>
                        <el-option value="true" label="发送成功"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="param.convert_status" placeholder="转链状态" style="width:120px" clearable>
                        <el-option :value="0" label="未转链"></el-option>
                        <el-option :value="4" label="转链失败"></el-option>
                        <el-option :value="6" label="转链成功"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="param.error_code" placeholder="失败状态" style="width:120px" clearable>
                        <el-option :value="504" label="转链超时"></el-option>
                        <el-option :value="1003" label="转链异常"></el-option>
                        <el-option :value="1004" label="淘宝限流"></el-option>
                        <el-option :value="1008" label="须用万能"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom-start" width="500" trigger="click">
                        <el-form-item label="万能口令：">
                            <el-select v-model="param.has_tkl_super" placeholder="是否调用万能淘口令" style="width:380px" clearable>
                                <el-option value="true" label="已调用"></el-option>
                                <el-option value="false" label="未调用"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="消息内容：">
                            <el-input v-model.trim="param.text" placeholder="消息内容" clearable style="width: 380px"></el-input>
                        </el-form-item>
                        <el-form-item label="上报时间：">
                            <el-date-picker
                                v-model="param.time"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :clearable="false"
                                style="width:380px">
                            </el-date-picker>
                        </el-form-item>
                        <el-button slot="reference" type="primary" plain>更多</el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
                </el-form-item>
                <el-form-item v-if="user.role=='admin'">
                    <el-button type="warning" :loading="btnLoading" @click="openConvertErrorWin">转链失败情况</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%"  v-loading="loading" :height="tableHeight">
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="用户名" width="90" align="center"></el-table-column>
                <el-table-column prop="qq" label="机器人号" width="100">
                    <template slot-scope="scope">
                        {{/^\d+$/.test(scope.row.qq) ? "qq:":"微信:"}}{{scope.row.qq}}
                    </template>
                </el-table-column>
                <el-table-column prop="text" label="消息" width="240">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top-start"
                            width="400"
                            trigger="hover">
                            <div v-html="scope.row.text.replace(/[\r\n]/g,'<br>')"></div>
                            <span slot="reference" style="color: #409EFF;cursor: pointer;">{{scope.row.text | subStr}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="group_type" label="采集模式" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.group_type=='live'?"直播":(scope.row.group_type=='convert'?"转链":"克隆")}}
                    </template>
                </el-table-column>
                <el-table-column label="是否调用万能淘口令" width="100" align="center">
                    <template slot-scope="scope">
                        <i v-if="scope.row.has_tkl_super" class="el-icon-check"></i>
                        <i v-else class="el-icon-close"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="is_valid" label="发送状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_valid" slot="reference" style="color: #67c23a;">成功</span>
                        <span v-else style="color:red">
                      失败:
                      <span v-if="scope.row.convert_status==4">转链失败</span>
                      <span v-else>{{scope.row.error_msg}}</span>
                  </span>
                    </template>
                </el-table-column>
                <el-table-column prop="convert_status" label="转链状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.convert_status==6" style="color: #67c23a;">成功</span>
                        <span v-else-if="scope.row.convert_status==4" style="color: red;">失败:{{scope.row.error_msg}}</span>
                        <span v-else style="color: #ccc;">未转链</span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="上报时间" width="100"></el-table-column>
                <el-table-column v-if="['yunying','admin'].indexOf(user.role)!=-1" prop="log_id" label="日志ID" width="160">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            width="400"
                            trigger="hover">
                            <el-row>
                                <div v-html="scope.row.error_msg"></div>
                                <el-button type="text" @click="detailBtn(scope.row.log_id)">详情</el-button>
                            </el-row>
                            <span slot="reference" style="color: #409EFF;cursor: pointer;">{{scope.row.log_id}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin: 10px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--推广情况-->
        <el-dialog title="转链失败情况（24小时）" :visible.sync="visible" :close-on-click-modal="false" width="900px">
            <el-row style="height: 360px;">
                <el-col :span="24">
                    <div id="myChart" :style="{width: '100%', height: '350px'}"></div>
                </el-col>
            </el-row>
            <el-row style="text-align: center">
                <el-col :span="4">
                    <div>转链失败(总)</div>
                    <div style="font-size: large;font-weight: bold;">{{convertError.total}}</div>
                </el-col>
                <el-col :span="4">
                    <div>转链超时</div>
                    <div style="font-size: large;font-weight: bold;">{{convertError.timeout}}</div>
                </el-col>
                <el-col :span="4">
                    <div>转链异常</div>
                    <div style="font-size: large;font-weight: bold;">{{convertError.error}}</div>
                </el-col>
                <el-col :span="4">
                    <div>淘宝限流</div>
                    <div style="font-size: large;font-weight: bold;">{{convertError.topLimit}}</div>
                </el-col>
                <el-col :span="4">
                    <div>须用万能</div>
                    <div style="font-size: large;font-weight: bold;">{{convertError.vipToken}}</div>
                </el-col>
            </el-row>
        </el-dialog>

        <!--日志情况-->
        <el-dialog title="Debug日志详情" :visible.sync="logVisible" :close-on-click-modal="false" width="900px">
            <el-row style="height: 360px;overflow-y: auto;">
                <el-col :span="24">
                    <jsonview :json="logDetails"></jsonview>
                </el-col>
            </el-row>
        </el-dialog>
    </section>
</template>
<script>
    import {localRead} from "@/libs/util";
    import {list,getConvertError,detail} from "@/api/sys/logger";
    import echarts from "echarts";
    import jsonview from "@/view/components/jsonview";

    export default {
        components:{
            jsonview
        },
        data() {
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '今日',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime((new Date(start.toLocaleDateString()).getTime()));
                                end.setTime((new Date(end.toLocaleDateString()).getTime() + 3600 * 1000 * 24 * 1));
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨日',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime((new Date(start.toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 1));
                                end.setTime((new Date(end.toLocaleDateString()).getTime()));
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime((new Date(start.toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 7));
                                picker.$emit('pick', [start, end]);
                            }
                        },
                    ]
                },
                param:{
                    name:'',
                    time:[
                        new Date(new Date().toLocaleDateString()),
                        new Date(new Date(new Date().toLocaleDateString()).getTime()+3600*1000*24)
                    ],
                    text:'',
                    is_valid:'',
                    has_tkl_super: '',
                    convert_status:'',
                    error_code: ''
                },
                visible: false,
                btnLoading: false,
                loading: false,
                data: [],
                page: 1,
                limit: 20,
                total: 0,
                tableHeight: window.innerHeight-220,
                user: {},
                //失败情况统计
                convertError: {},

                //日志详情
                logDetails: {},
                logVisible: false,
            }
        },
        filters:{
            subStr(str){
                return str.substr(0, 30)+"...";
            }
        },
        methods: {
            searchBtn(){
                this.page = 1;
                this.getData();
            },
            //翻页
            pageChange(page){
                this.page = page;
                this.getData();
            },
            //获取数据
            getData(){
                let param = this.param;
                param.page = this.page;
                param.limit = this.limit;
                this.loading = true;
                list(param).then((res) => {
                    this.loading = false;
                    this.total = res.data.total;
                    this.data = res.data.data;
                });
            },
            //打开转链失败情况窗口
            openConvertErrorWin(){
                this.btnLoading = true;
                getConvertError().then((res)=>{
                    this.btnLoading = false;
                    if(res.code === 0){
                        this.visible = true;
                        this.convertError = res.data;
                        this.$nextTick(() => {
                            this.drawLineChart();
                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.btnLoading = false;
                })
            },
            //画曲线图
            drawLineChart() {
                let myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption({
                    title: {text: ''},
                    tooltip: {trigger: 'axis'},
                    legend: {data:['转链失败(总)','转链超时','转链异常','淘宝限流','须用万能']},
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: this.convertError.view.date
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                    },
                    series: [
                        {name:'转链失败(总)', type:'line', smooth : true, data: this.convertError.view.total},
                        {name:'转链超时', type:'line', smooth : true, data:this.convertError.view.timeout},
                        {name:'转链异常', type:'line', smooth : true, data: this.convertError.view.error},
                        {name:'淘宝限流', type:'line', smooth : true, data:this.convertError.view.topLimit},
                        {name:'须用万能', type:'line', smooth : true, data:this.convertError.view.vipToken}
                    ]
                });
            },
            //日志详情
            detailBtn(logId){
                detail({log_id: logId}).then((res) => {
                    if(res.code === 0){
                        this.logDetails = res.data;
                        this.logVisible = true;
                    }else{
                        this.$message.error(res.msg);
                    }
                });
            },
        },
        mounted(){
            this.user = this.$store.getters.user;
            this.$set(this.param, 'name', this.user.name);
            this.searchBtn();
        },
    }
</script>
